<template>
<el-row :gutter="20" class="checkcase">
<el-col :span="9" :offset="2" >
 <div v-loading="loading" class="grid-content bg-purple-light checkcase-left">
    <h2>{{projectFunDetailInfo.pointVO.projectName}}</h2>

    <h3>功能</h3>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="path in projectFunDetailInfo.pathNames">{{path}}</el-breadcrumb-item>
    </el-breadcrumb>

    <h3>
    功能权限
    <el-table
    :data="projectFunDetailInfo.rolePermissionList"
    border
    style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        width="50">
    </el-table-column>
    <el-table-column
        prop="roleName"
        label="角色名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="permissionName"
        label="权限">
    </el-table-column>
    <el-table-column
        prop="description"
        label="备注">
    </el-table-column>
    </el-table>
    </h3>
    <h3 v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'FUN'">功能描述</h3>
    
    <el-input
    v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'FUN'"
     v-model="projectFunDetailInfo.funDesc" :disabled="true" type="textarea" placeholder="请输入功能描述" show-word-limit
    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
    

    <h3 v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PROCESS'"
    
    >流程图</h3>
    <div v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PROCESS'" >
    <template v-if="projectFunDetailInfo.processImages.length > 0">
    <div v-for="processImage in projectFunDetailInfo.processImages" >
        <el-image style="width:100px; height:100px"  :src="'data:image/gif;base64,'+processImage.imgBase64" :preview-src-list="['data:image/gif;base64,'+processImage.imgBase64]" :fit='"contain"'>
            <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
            </div>
        </el-image>
    </div>
    </template>
    <template v-if="projectFunDetailInfo.processImages.length == 0">
        <span>无流程图</span>
    </template>
    </div>

    <h3 
    v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PROCESS'"
    >
    流程描述
    <el-table
    :data="projectFunDetailInfo.processInfoList"
    :border="true"
    style="width: 100%">
        <el-table-column
            type="index"
            label="序号"
            width="50">
            </el-table-column>
        <el-table-column
            prop="processStepDesc"
            label="流程步骤描述"
            >
        </el-table-column>
    </el-table>
    </h3>

 <div
 v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PAGE'
    || projectFunDetailInfo.pointVO.projectFunPointType == 'FUN'
    || projectFunDetailInfo.pointVO.projectFunPointType == 'PAGE_INPUT'
    || projectFunDetailInfo.pointVO.projectFunPointType == 'PAGE_OUTPUT'
    "
 >
    <h3>页面信息</h3>
    <el-form v-for="pageInfo in projectFunDetailInfo.pageInfos">
    <div v-if="pageInfo.pageNo == projectFunDetailInfo.pointVO.pageNo">
    <el-form-item label="页面名称" prop="mobile">
        <el-input :disabled="true" placeholder="请输入页面名称" v-model="pageInfo.pageName"   clearable />
    </el-form-item>

    <el-form-item label="输入项" v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PAGE_INPUT'" prop="mobile"  >
        <el-table
        :data="pageInfo.inputOptions"
        :row-class-name="tableRowClassNameInput"
        border
        style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="要素名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="mustName"
                label="是否必填"
                width="180">
            </el-table-column>
            <el-table-column
                prop="optionComponentTypeName"
                label="组件类型">
            </el-table-column>
            <el-table-column
                prop="inputTypeName"
                label="输入类型">
            </el-table-column>
            <el-table-column
                prop="option"
                label="可选项">
            </el-table-column>

            <el-table-column
                prop="optionTitle"
                label="提示">
            </el-table-column>

            <el-table-column
                prop="inputConstraint"
                label="约束">
            </el-table-column>

            <el-table-column
                prop="description"
                label="备注">
            </el-table-column>
        </el-table>
    </el-form-item>


    <el-form-item label="输出项" v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'PAGE_OUTPUT'"  prop="mobile">
        <el-table
        :data="pageInfo.outOptions"
        :row-class-name="tableRowClassNameOutput"
        border
        style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="要素名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="optionComponentTypeName"
                label="输出形式">
            </el-table-column>
            <el-table-column
                prop="description"
                label="备注">
            </el-table-column>
        </el-table>
    </el-form-item>


    <el-form-item label="业务规则" v-if="projectFunDetailInfo.pointVO.projectFunPointType == 'FUN'"  prop="mobile">
        <el-table
        :data="pageInfo.pageRuleList"
        :row-class-name="tableRowClassNameRule"
        border
        style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
                prop="ruleStepDesc"
                label="规则描述"
                >
            </el-table-column>
    
        </el-table>
    </el-form-item>
    
    <hr tyle="border: 5px; color: #ccc;"/>
    </div>
    </el-form>
     </div>
</div>

</el-col>
 <el-col :span="12" v-loading="loading" style="border-left:solid 1px rgb(201 192 192);" >
    <div v-loading="loading" class="grid-content bg-purple-light checkcase-right">
        <el-divider content-position="left">测试点</el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top:5px;">
            <el-form-item label="项目" prop="projectNo">
            <el-select v-model="form.projectNo" :disabled="true" @change="check_change" placeholder="请选择功能">
                <el-option
                v-for="projectInfo in form.infoList"
                :key="projectInfo.projectNo"
                :label="projectInfo.projectName"
                :value="projectInfo.projectNo"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="功能" prop="projectFunNo">
            <treeselect v-model="form.projectFunNo" :disabled="true" :options="form.funList" :show-count="true" placeholder="请选择功能" />
            </el-form-item>
            <el-form-item label="类型" prop="projectFunPointType">
            <el-select v-model="form.projectFunPointType" @change="changePage" placeholder="请选择测试点类型">
                <el-option
                v-for="dict in dict.type.test_point_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="页面" v-if="form.projectFunPointType!='PROCESS'">
            <el-select placeholder="请选择页面" v-model="form.pageNo" @change="changePage" >
                <el-option
                v-for="(page,index) in editPointFunInfo[form.projectFunNo]"
                :key="index"
                :label="page.pageName"
                :value="page.pageNo"
                ></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="输入项" v-if="form.projectFunPointType=='PAGE_INPUT'">
            <el-select v-model="form.typeId" placeholder="请选择输入项">
                <el-option
                v-for="inputOption in inputList"
                :key="inputOption.id"
                :label="inputOption.optionName"
                :value="inputOption.id"
                ></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="输出项" v-if="form.projectFunPointType=='PAGE_OUTPUT'">
            <el-select v-model="form.typeId" placeholder="请选择输出项">
                <el-option
                v-for="outOption in outList"
                :key="outOption.id"
                :label="outOption.optionName"
                :value="outOption.id"
                ></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="业务规则" v-if="form.projectFunPointType=='FUN'">
            <el-select v-model="form.typeId" placeholder="请选择业务规则">
                <el-option
                v-for="ruleObj in ruleList"
                :key="ruleObj.id"
                :label="ruleObj.desc"
                :value="ruleObj.id"
                >
                <div :title="ruleObj.desc" style="width:200px;overflow:hidden ">{{ ruleObj.desc }}</div>
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="projectFunPointDesc">
            <el-input v-model="form.projectFunPointDesc" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            
        </el-form>
        <el-divider content-position="left">用例</el-divider>
        <el-form v-if="addCaseForm.show" ref="addCaseForm.form" :model="addCaseForm.form" :rules="addCaseFormRules" label-width="80px">
            <el-form-item label="标题" prop="caseTitle">
            <el-input v-model="addCaseForm.form.caseTitle" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="类型" prop="caseType">
            <el-select v-model="addCaseForm.form.caseType" placeholder="请选择用例类型">
                <el-option
                v-for="dict in dict.type.case_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="难度" prop="caseDiffLevel">
            <el-select v-model="addCaseForm.form.caseDiffLevel" placeholder="请选择用例难度">
                <el-option
                v-for="dict in dict.type.case_diff_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="优先级" prop="casePriority">
            <el-select v-model="addCaseForm.form.casePriority" placeholder="请选择用例优先级">
                <el-option
                v-for="dict in dict.type.case_priority"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="前置操作" prop="beforeStepDesc">
            <el-input v-model="addCaseForm.form.beforeStepDesc" type="textarea" :placeholder="templateInfo" />
            </el-form-item>
            <el-form-item label="操作步骤" prop="stepDesc">
            <el-input v-model="addCaseForm.form.stepDesc" type="textarea" :placeholder="templateInfo" />
            </el-form-item>
            <el-form-item label="预期结果" prop="acceptResultDesc">
            <el-input v-model="addCaseForm.form.acceptResultDesc" type="textarea" :placeholder="templateInfo" />
            </el-form-item>
        </el-form>
    </div>
    <div class="checkcase-right-buttom">
        <el-button type="primary" @click="submitForm">修 改</el-button>
        <el-button v-if="form.prevPointNo" type="primary" @click="goCheck(form.prevPointNo)">上一条</el-button>
        <el-button v-if="form.nextPointNo" type="primary" @click="goCheck(form.nextPointNo)">下一条</el-button>
        <el-button v-if="form.finalStatus != 3 && form.projectFunPointNo != null && form.projectFunPointNo != ''" type="primary" @click="submitChecked">测试点审核通过</el-button>
        <el-button v-if="form.finalStatus == 3 && addCaseForm.form.finalStatus != 3 && addCaseForm.form.caseNo != null && addCaseForm.form.caseNo != ''" type="primary" @click="submitCaseChecked">用例审核通过</el-button>
    </div>
 </el-col>
   
</el-row>

</template>
<script>
import { get_detail_info } from "@/api/ai_smart/checkCase";
import { getPoint_, updatePoint, point_checked_pass,get_fun_info_detail } from "@/api/ai_smart/point";
import { getCase, case_checked_pass} from "@/api/ai_smart/case";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "CheckCase",
    dicts: ['is_deleted', 'test_point_type', 'case_type', 'case_diff_level', 'case_priority', 'final_status'],
    components: { Treeselect },
    data() {
        return {
            inputList: [],
            outList: [],
            ruleList: [],
            style: {
                position:"fixed",
                bottom:0,
            },
            // 用例文本域提示信息
       templateInfo: `1,xxxxxxxxx
2,xxxxxxxxx
3,xxxxxxxxx
…………`,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                projectFunPointType: [
                { required: true, message: "测试点类型不能为空", trigger: "change" }
                ]
            },
            addCaseFormRules: {
                caseTitle: [
                { required: true, message: "用例名称不能为空", trigger: "blur" }
                ],
                caseType: [
                { required: true, message: "用例类型不能为空", trigger: "change" }
                ],
                caseDiffLevel: [
                { required: true, message: "用例难度不能为空", trigger: "change" }
                ],
                casePriority: [
                { required: true, message: "用例优先级不能为空", trigger: "change" }
                ]
            },
            // 添加用例的表单数据
            addCaseForm: {
                show: false,
                form: {}
            },
            queryParams: {},
            loading: true,
            projectFunDetailInfo: {
                pointVO:{
                    projectName: ""
                }
            },
            editPointFunInfo: {},
            isLoadingData: false,
        }
    },
    created(){

        this.queryParams.projectNo = this.$route.query && this.$route.query.projectNo;
        this.queryParams.projectFunNo = this.$route.query && this.$route.query.projectFunNo;
        this.queryParams.projectFunPointNo = this.$route.query && this.$route.query.projectFunPointNo;
        this.queryParams.projectFunPointType = this.$route.query && this.$route.query.projectFunPointType;
        this.queryParams.projectFunPointPath = this.$route.query && this.$route.query.projectFunPointPath;
        this.queryParams.finalStatus = this.$route.query && this.$route.query.finalStatus;
        this.queryParams.caseFinalStatus = this.$route.query && this.$route.query.caseFinalStatus;
        this.queryParams.createDate = this.$route.query && this.$route.query.createDate;
        this.queryParams.startDate = this.$route.query && this.$route.query.startDate;
        this.queryParams.endDate = this.$route.query && this.$route.query.endDate;
        this.queryParams.fromFunDetail = this.$route.query && this.$route.query.fromFunDetail;

        if(this.queryParams.fromFunDetail == 1){
            this.queryParams.type = this.$route.query && this.$route.query.type;
            this.queryParams.typeId = this.$route.query && this.$route.query.typeId;
        }

        if(!this.projectFunDetailInfo.projectNo){
            this.getDetailInfo();
        }
        //在窗口滚动时调用监听窗口滚动方法
        this.$nextTick(() => {
        window.addEventListener('scroll', this.windowScrollListener, true);
        })
    },
    activated(){
        if(!this.isLoadingData){
            this.queryParams.projectNo = this.$route.query && this.$route.query.projectNo;
            this.queryParams.projectFunNo = this.$route.query && this.$route.query.projectFunNo;
            this.queryParams.projectFunPointNo = this.$route.query && this.$route.query.projectFunPointNo;
            this.queryParams.projectFunPointType = this.$route.query && this.$route.query.projectFunPointType;
            this.queryParams.projectFunPointPath = this.$route.query && this.$route.query.projectFunPointPath;
            this.queryParams.finalStatus = this.$route.query && this.$route.query.finalStatus;
            this.queryParams.caseFinalStatus = this.$route.query && this.$route.query.caseFinalStatus;
            this.queryParams.createDate = this.$route.query && this.$route.query.createDate;
            this.queryParams.startDate = this.$route.query && this.$route.query.startDate;
            this.queryParams.endDate = this.$route.query && this.$route.query.endDate;
            this.queryParams.isDeleted = this.$route.query && this.$route.query.isDeleted;
            if(this.queryParams.fromFunDetail == 1){
                this.queryParams.type = this.$route.query && this.$route.query.type;
                this.queryParams.typeId = this.$route.query && this.$route.query.typeId;
            }
            this.getDetailInfo();
        }
    },
    methods: {
        windowScrollListener() {
            //获取操作元素最顶端到页面顶端的垂直距离
            // var scrollTop = Math.floor(document.documentElement.scrollTop || document.body.scrollTop || document.querySelector('#app').scrollTop);
            // // console.log(scrollTop, "scrollTop");
            // if (scrollTop >= 84) {
            //     this.style.position = "fixed"; 
            // }
            // if (scrollTop < 84) {
            //     this.style.position = "absolute"; 
            // }
        },
        // 用例审核通过
        submitCaseChecked(){
            case_checked_pass(this.addCaseForm.form.caseNo).then(res=>{
                this.$modal.msgSuccess(res.msg);
                getPoint_(this.queryParams).then(response => {
                    this.form = response.data;
                    
                    this.check_change(this.form.projectNo);
                });
                
                getCase(this.projectFunDetailInfo.pointVO.caseVO.caseNo).then(response => {
                    this.addCaseForm.form = response.data;
                    this.addCaseForm.show = true;
                });
            });
        },
        // 测试点审核通过
        submitChecked(){
            point_checked_pass(this.form.projectFunPointNo).then(res=>{
                this.$modal.msgSuccess(res.msg);
                getPoint_(this.queryParams).then(response => {
                    this.form = response.data;
                    this.check_change(this.form.projectNo);
                });
                
                getCase(this.projectFunDetailInfo.pointVO.caseVO.caseNo).then(response => {
                    this.addCaseForm.form = response.data;
                    this.addCaseForm.show = true;
                });
            });
        },
        /** 提交按钮 */
        submitForm() {
        this.$refs["form"].validate(valid => {
            if (valid) {
                this.$refs["addCaseForm.form"].validate(valid1 =>{
                    if(valid1){
                        this.form.caseIo = this.addCaseForm.form;
                        updatePoint(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.getDetailInfo();
                        });
                    }
                });
            }
        });
        },
        getDetailInfo(){
            this.loading = true;
            this.isLoadingData = true;
            get_detail_info(this.queryParams.projectFunPointNo).then(res=>{
                this.projectFunDetailInfo = res.data;
                this.loading = false;
                this.isLoadingData = false;
                getPoint_(this.queryParams).then(response => {
                    this.form = response.data;
                    this.check_change(this.form.projectNo);
                    this.getFunInfoDetail();
                });
                
                getCase(this.projectFunDetailInfo.pointVO.caseVO.caseNo).then(response => {
                    this.addCaseForm.form = response.data;
                    this.addCaseForm.show = true;
                });

                
               

            }).catch(res => {
                this.loading = false;
                this.isLoadingData = false;
            });

            
        },
        check_change(data){
            this.form.funList = [];
            for(let i = 0; i < this.form.infoList.length; i++){
                if(this.form.infoList[i].projectNo == data){
                this.form.funList = this.form.infoList[i].projectFunList;
                break;
                }
            }
        },
        tableRowClassNameRule({row}) {
            if (row.pageNo == this.projectFunDetailInfo.pointVO.pageNo && row.id ==  this.projectFunDetailInfo.pointVO.typeId && this.projectFunDetailInfo.pointVO.type == "FUN") {
            return 'success-row';
            }
            return '';
        },
        tableRowClassNameInput({row}) {
            if (row.pageNo == this.projectFunDetailInfo.pointVO.pageNo && row.id ==  this.projectFunDetailInfo.pointVO.typeId && this.projectFunDetailInfo.pointVO.type == "PAGE_INPUT") {
            return 'success-row';
            }
            return '';
        },
        tableRowClassNameOutput({row}) {
            if (row.pageNo == this.projectFunDetailInfo.pointVO.pageNo && row.id ==  this.projectFunDetailInfo.pointVO.typeId && this.projectFunDetailInfo.pointVO.type == "PAGE_OUTPUT") {
            return 'success-row';
            }
            return '';
        },
        // 跳转下一条评审页面
        goCheck(nextPointNo){
            const path = "/ai_smart/checkCase";
            this.queryParams.projectFunPointNo = nextPointNo;
            this.$router.replace({ path: path, query: this.queryParams });
            this.getDetailInfo();
        },
        getFunInfoDetail(){
            if(!this.form.projectFunNo){
                return ;
            }
            get_fun_info_detail(this.form.projectFunNo).then(res =>{
                this.editPointFunInfo = res.data;
                this.inputList= [];
                this.outList= [];
                this.ruleList= [];
                if(!this.form.projectFunNo){
                    return ;
                }


                const pointType = this.form.projectFunPointType;
                const funNo = this.form.projectFunNo;
                if(Object.keys(this.editPointFunInfo).length === 0){
                    this.getFunInfoDetail();
                }
                if(funNo){
                    for(let i = 0; i<this.editPointFunInfo[funNo].length; i++){
                        if(this.editPointFunInfo[funNo][i].pageNo == this.form.pageNo){
                            if(pointType == "PAGE_INPUT"){
                                this.inputList = this.editPointFunInfo[funNo][i].inputList;
                            }else if(pointType == "PAGE_OUTPUT"){
                                this.outList = this.editPointFunInfo[funNo][i].outList;
                            }else if(pointType == "FUN"){
                                this.ruleList = this.editPointFunInfo[funNo][i].ruleList;
                            }
                        }
                    }

                }
            });
            },
        changePage(){
            this.inputList= [];
            this.outList= [];
            this.ruleList= [];
            this.form.typeId = null;
            if(!this.form.projectFunNo){
                return ;
            }


            const pointType = this.form.projectFunPointType;
            const funNo = this.form.projectFunNo;
            if(Object.keys(this.editPointFunInfo).length === 0){
                this.getFunInfoDetail();
            }
            if(funNo){
                for(let i = 0; i<this.editPointFunInfo[funNo].length; i++){
                    if(this.editPointFunInfo[funNo][i].pageNo == this.form.pageNo){
                    if(pointType == "PAGE_INPUT"){
                        this.inputList = this.editPointFunInfo[funNo][i].inputList;
                    }else if(pointType == "PAGE_OUTPUT"){
                        this.outList = this.editPointFunInfo[funNo][i].outList;
                    }else if(pointType == "FUN"){
                        this.ruleList = this.editPointFunInfo[funNo][i].ruleList;
                    }
                    }
                }

            }
            },
    }
}
</script>
<style>
    .checkcase{
         height: calc(100vh - 100px) !important;
         width: 100%;
         overflow: hidden;
    }
    .checkcase-left{
         height: calc(100vh - 100px) !important;
         width: 100%;
         overflow: auto;
    }
    .checkcase-right{
         height: calc(100vh - 160px) !important;
         width: 100%;
         overflow: auto;
    }
    .checkcase-right-buttom{
        position: relative;
        height: 54px;
        padding-left: calc((100vh - 360px)/2);
        background-color: #f2f2f2;
        padding-top:10px;
        padding-bottom:10px;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>